<template>
  <l-layout>
    <l-panel :title="$t('一维码示例')">
      <div
        style="width:100%;background-color: #333;"
        class="pd-16 flex flex-c-center"
      >
        <l-barcode v-bind="params" />
      </div>
      <div style="width: 480px;margin: auto;padding-top: 32px; ">
        <el-form
          label-position="right"
          label-width="100px"
          ref="params"
          size="mini"
          :model="params"
        >
          <el-form-item label="条码数值" prop="value">
            <el-input
              v-model="params.value"
              placeholder="请输入内容(不可为中文)"
            />
          </el-form-item>

          <el-form-item label="条码类型">
            <l-select v-model="params.format" :options="options" />
          </el-form-item>

          <el-form-item label="条码宽度">
            <el-input-number v-model="params.width" :min="1" />
          </el-form-item>

          <el-form-item label="条码高度">
            <el-input-number v-model="params.height" :min="1" />
          </el-form-item>

          <el-form-item label="背景颜色">
            <el-color-picker v-model="params.background" />
          </el-form-item>

          <el-form-item label="字体颜色">
            <el-color-picker v-model="params.lineColor" />
          </el-form-item>

          <el-form-item label="文字显示">
            <el-radio v-model="params.displayValue" :label="true">显示</el-radio>
            <el-radio v-model="params.displayValue" :label="false"
              >隐藏</el-radio
            >
          </el-form-item>

          <el-form-item label="文字对齐">
            <el-radio v-model="params.textAlign" label="left">左边</el-radio>
            <el-radio v-model="params.textAlign" label="center">中间</el-radio>
            <el-radio v-model="params.textAlign" label="right">右边</el-radio>
          </el-form-item>

          <el-form-item label="文字字体">
            <el-radio v-model="params.fontOptions" label="">无效果</el-radio>
            <el-radio v-model="params.fontOptions" label="bold">加粗</el-radio>
            <el-radio v-model="params.fontOptions" label="italic"
              >斜体</el-radio
            >
            <el-radio v-model="params.fontOptions" label="bold italic"
              >加粗+斜体</el-radio
            >
          </el-form-item>

          <el-form-item label="文字位置">
            <el-radio v-model="params.textPosition" label="top">上</el-radio>
            <el-radio v-model="params.textPosition" label="bottom">下</el-radio>
          </el-form-item>
        </el-form>
      </div>
    </l-panel>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "CODE128",
          label: "CODE128",
        },
        {
          value: "codabar",
          label: "codabar",
        },
        {
          value: "CODE39",
          label: "CODE39",
        },
        {
          value: "MSI",
          label: "MSI",
        },
        {
          value: "MSI10",
          label: "MSI10",
        },
        {
          value: "MSI11",
          label: "MSI11",
        },
        {
          value: "MSI1010",
          label: "MSI1010",
        },
        {
          value: "MSI1110",
          label: "MSI1110",
        },
      ],
      params: {
        format: "CODE39",
        value: "12345678",
        height: 20,
        width: 2,
        displayValue: true,
        fontOptions: "",
        background: "#FFFFFF",
        textAlign: "left",
        textPosition: "bottom",
        lineColor: "#000000",
        margin:10,
      },
    };
  }
};
</script>
